<template>
  <div class="learning-show learning-code-container" :class="{'py-b': iconWrapperVisible}">
    <div class="code-bar-wrapper" v-if="props.options.length">
      <div class="code-bar" v-for="op in props.options" :key="op.name" @click="handleBarClick(op)"
           :class="{'active': op.name === active}">
        {{ op.name }}
      </div>
    </div>
    <div class="code-page-wrapper">
      <slot :active="active"></slot>
    </div>
    <div class="icon-wrapper" v-if="iconWrapperVisible">
      <svg @click="changeCodeVisible()" preserveAspectRatio="xMidYMid meet"
           viewBox="0 0 24 24" width="1.2em" height="1.2em" data-v-65a7fb6c="" v-if="codeSlot">
        <path fill="currentColor"
              d="m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23
                 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z">
        </path>
      </svg>
    </div>
      <CollapseTransition v-if="codeSlot">
        <div class="code-source-wrapper" v-show="codeVisible" v-highlight>
          <slot name="code"></slot>
          <div class="code-source-foo">
            <span @click="changeCodeVisible(false)">隐藏关键代码</span>
          </div>
        </div>
      </CollapseTransition>
    </div>
</template>

<script setup>
import { computed, ref, useSlots } from 'vue';
import CollapseTransition from '@/components/transition/collapse-transition.vue';

const slotProxy = useSlots();
const codeSlot = computed(() => !!slotProxy.code);
const emits = defineEmits([ 'barChange' ]);
const props = defineProps({
  options: {
    type: [ Array ],
    default: () => []
  }
});
const iconWrapperVisible = computed(() => codeSlot.value);
const active = ref(props.options[0] ? props.options[0].name : '');
const codeVisible = ref(false);

function handleBarClick(option) {
  active.value = option.name;
  emits('barChange', option);
}

function changeCodeVisible(boo = !codeVisible.value) {
  codeVisible.value = boo;
}
</script>

<style lang='scss' scoped>
.learning-code-container {
  .code-bar-wrapper {
    display: flex;
    margin: 0 -10px 10px;
    overflow: auto;
    flex-direction: column;
    padding: 0 20px 0;

    .code-bar {
      flex: 1;
      margin: 0 10px 10px;
      padding: 10px 20px;
      font-size: .8rem;
      white-space: nowrap;
      border-radius: .25rem;
      font-family: Consolas, serif;
      cursor: pointer;
      border: 1px solid var(--learning-border-color);

      &:hover {
        color: var(--learning-color-1);
        border-color: var(--learning-color-1-o3);
        background-color: var(--learning-color-1-o1);
        outline: none;
      }

      &.active {
        color: var(--learning-color-1);
        border-color: var(--learning-color-1-o3);
        background-color: var(--learning-color-1-o1);
        outline: none;
      }
    }
  }

  @media screen and (min-width: 1440px) {
    .code-bar-wrapper {
      flex-direction: row;
    }
  }

  .code-page-wrapper {
    padding: 0 20px;

    :deep(&>p:first-child) {
      margin-top: 0;
    }
  }

  .icon-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 20px;
    position: relative;
    margin-top: 20px;
    user-select: none;
    border-top: 1px solid var(--learning-border-color);

    svg {
      cursor: pointer;
    }
  }
}
</style>
